<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <!-- layui样式文件 -->
    <link rel="stylesheet" href="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/css/layui.min.css">
    <!-- layui脚本文件 -->
    <script src="//cdn.bootcdn.net/ajax/libs/layui/2.5.7/layui.min.js"></script>
    <script>
        layui.use('element', function(){
            var element = layui.element;
        });
    </script>
    <link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/1.css') }}">
    <link rel="stylesheet" href="{{ url_for('static',filename='css/module.css') }}">
    <script type="text/javascript" src="{{ url_for('static',filename='js/jquery-3.6.0.min.js') }}"></script>
<style type="text/css">
        div.search{
            height: 40px;
             width: 500px;
        }
        div.search form{
            width: 100%;
            height: 100%;
        }
        div.search form input:nth-child(2){
            width: 400px;
            height: 100%;
            font-size: 16px;
            text-indent: 40px;
            border: none;
            float: left;
        }
        div.search form input:nth-child(3){
            width: 100px;
            height: 100%;
            font-size: 16px;
            letter-spacing: 5px;
            border: none;
        }
        div.search form img{
            position: absolute;
            left: 250px;
            transform: translateX(-250px);
            margin-top: 10px;
            margin-left: 10px;
            height: 20px;
            width: 20px;
        }
    </style>
    {% block body2 %}{% endblock %}
</head>
<body>
<!--头部-->
<div id="header">
        <div class="logo"><img src="{{ url_for('static',filename='image/book.png') }}"><span>彩阳书店</span></div>
        <div class="search">
            <form action="#" method="">
                <img src="{{ url_for('static',filename='image/搜索.png') }}" alt="">
                <input type="text" id="searchBox1" name="condition" placeholder="请输入搜索书名">
                <input type="button" id="searchs" value="搜索">
            </form>
        </div>
        <div class="header-right">
            <ul style="background-color: rgb(179,190,245)!important;" class="layui-nav" lay-filter="">
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for('product.soucang') }}">收藏</a></li>
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for('product.showOrder') }}">订单</a></li>
                <li class="layui-nav-item"><a style="font-size: 18px;color: black" href="{{ url_for("product.cart") }}">购物车</a></li>
                <li class="layui-nav-item">
                    <a style="font-size: 18px;color: black" href="javascript:;">管理</a>
                    <dl class="layui-nav-child"> <!-- 二级菜单 -->
                        <dd><a href="{{ url_for("person.changePass") }}">修改密码</a></dd>
                        <dd><a href="{{ url_for("person.userInfo") }}">个人资料</a></dd>
                        <dd><a href="{{ url_for("person.showAdd") }}">收货管理</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
<!--返回首页-->
<div id="fanhui">
    <span id="sp1"><a style="text-decoration: none;color: black" href="{{ url_for("index.index") }}">首页</a></span>&nbsp/
    {% block body1 %}{% endblock %}
</div>
<!--详细书籍-->
<div id="total">
</div>
<!--分页-->
<div id="fenye">
    <button id="first">首页</button>
    <button id="pro">上一页</button>
    <button id="next">下一页</button>
    <button id="last">尾页</button>
    <a id="currentpage" style="font-size: small"></a>
    <a id="totalpage" style="font-size: small"></a>
</div>
<!--底部-->
<div id="bottom"></div>
<script type="text/javascript">
    $("#guanli_a").click(function () {
        $("#liebiao").toggle();
    });
</script>
<!--搜索框-->
<script type="text/javascript">
    layui.use('layer', function(){
        var layer = layui.layer;
        document.getElementById("searchs").onclick=function () {
            let zhi=document.getElementById("searchBox1").value;
            if(!zhi){
                layer.alert("请输入搜索内容！",{icon:2,anim:6});
            }else {
                $.ajax({
                    url:"/product/search/book",
                    type: "get",
                    data: {"bookname":zhi},
                    success:function (json) {
                        if(json.list.length!=0){
                            var url="{{ url_for('product.search') }}?bookname="+zhi;
                            location.href=url;
                        }else {
                            layer.alert("没有搜到你想要的书籍！",{icon:2,anim:6});
                        }
                    }
                });
            }
        }
    });
</script>
</body>
</html>